<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="lijinbo" />
    <title>047-懒加载的解决方案</title>
  </head>

  <body>
    <p>
      <a href="http://www.ruanyifeng.com" target="_blank">使用的图片来源：阮一峰老师博客</a>
    </p>
    <h2>
      <a href="./位置计算加滚动事件懒加载.html" target="_blank">方案一： 位置计算 + 滚动事件 (Scroll)</a>
    </h2>
    <h2>
      <a href="./使用IntersectionObserver观察元素懒加载.html" target="_blank">
        方案二： 使用 IntersectionObserver 异步观察目标元素是否出现在窗口中
      </a>
    </h2>
    <h2>
      <a href="./使用img的loading属性懒加载.html" target="_blank">方案三： 使用 img 的 loading="lazy" 属性</a>
    </h2>
    <hr />
    <p>
      <a href="./vue图片懒加载.html">vue 图片懒加载示例 vue-lazyload</a>
    </p>
  </body>
</html>
